<template>
    <div style="margin-top: 50px">

        <!--供应商标题-->
        <el-row style="margin-right: 150px">
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <span style="font-size: 25px">供应商管理</span>
                </div>
            </el-col>
        </el-row>

        <!--表格-->
        <el-row style="margin-top: 25px;margin-left: 50px">
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <el-table
                            :data="tableData"
                            width="100%"
                            highlight-current-row
                            @current-change="handleCurrentChange">
                        <el-table-column
                                property="name"
                                label="供应商名称"
                                width="280">
                        </el-table-column>
                        <el-table-column
                                property="person"
                                label="负责人"
                                width="150">
                        </el-table-column>
                        <el-table-column
                                property="scope"
                                label="经营范围"
                                width="280">
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
        </el-row>

        <!--分页和查询还有按钮-->
        <el-row style="margin-top: 30px;margin-right: 400px">
            <el-col :span="14">
                <div class="grid-content bg-purple">
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="total"
                            :page-size="pageSize"
                            @current-change="change">
                    </el-pagination>
                    <div style="margin-top: 100px">
                        <el-button type="success" @click="addShow">添加供应商</el-button>
                        <el-button type="success" @click="updateShow">修改供应商信息</el-button>
                        <el-button type="success" @click="queryShow">查看供应商信息</el-button>
                        <el-button type="success" @click="excel">导出</el-button>

                    </div>
                    <el-upload
                            class="upload-demo"
                            ref="upload"
                            action="jxc/supplier/importExcel"
                            method="post"
                            :file-list="fileList"
                            :auto-upload="false">
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                    </el-upload>
                </div>
            </el-col>

            <el-col :span="10">
                <div class="grid-content bg-purple-light">
                    <el-card class="box-card">
                        <span>查询供应商信息</span><br>
                        <el-form ref="form" :model="form" label-width="80px"
                                 style="margin-left: 50px;margin-right: 50px;margin-top: 10px">
                            <el-form-item label="供应商名">
                                <el-input v-model="supplierName"></el-input>
                            </el-form-item>
                            <el-form-item label="经营范围">
                                <el-input v-model="manageScope"></el-input>
                            </el-form-item>
                        </el-form>
                        <el-button type="primary" @click="query">查询</el-button>
                    </el-card>
                </div>
            </el-col>
        </el-row>

        <!--添加供应商弹框-->
        <el-dialog
                title="添加供应商信息"
                :visible.sync="dialogVisible"
                width="30%">
            <el-form ref="form" :model="form" label-width="100px" style="margin-right: 90px;margin-left: 50px">
                <el-form-item label="供应商名称">
                    <el-input v-model="supplier"></el-input>
                </el-form-item>
                <el-form-item label="负责人">
                    <el-input v-model="person"></el-input>
                </el-form-item>
                <el-form-item label="负责人电话">
                    <el-input v-model="phone"></el-input>
                </el-form-item>
                <el-form-item label="供应商地址">
                    <el-input v-model="address"></el-input>
                </el-form-item>
                <el-form-item label="经营范围">
                    <el-input v-model="scope"></el-input>
                </el-form-item>
            </el-form>
            <el-button type="success" @click="add">添加</el-button>
        </el-dialog>

        <!--修改供应商弹框-->
        <el-dialog
                title="修改供应商信息"
                :visible.sync="updateSupplier"
                width="30%">
            <el-form ref="form" :model="form" label-width="100px" style="margin-right: 90px;margin-left: 50px">
                <el-form-item label="供应商名称:">
                    <span>{{USupplier}}</span>
                </el-form-item>
                <el-form-item label="负责人:">
                    <el-input v-model="UPerson"></el-input>
                </el-form-item>
                <el-form-item label="负责人电话:">
                    <el-input v-model="UPhone"></el-input>
                </el-form-item>
                <el-form-item label="供应商地址:">
                    <span>{{UAddress}}</span>
                </el-form-item>
                <el-form-item label="经营范围:">
                    <span>{{UScope}}</span>
                </el-form-item>
            </el-form>
            <el-button type="success" @click="update">修改</el-button>
        </el-dialog>

        <!--查看供应商弹框-->
        <el-dialog
                title="查看供应商信息"
                :visible.sync="querySupplier"
                width="30%">
            <el-form ref="form" :model="form" label-width="100px" style="margin-right: 90px;margin-left: 50px">
                <el-form-item label="供应商名称:">
                    <span>{{USupplier}}</span>
                </el-form-item>
                <el-form-item label="负责人:">
                    <span>{{UPerson}}</span>
                </el-form-item>
                <el-form-item label="负责人电话:">
                    <span>{{UPhone}}</span>
                </el-form-item>
                <el-form-item label="供应商地址:">
                    <span>{{UAddress}}</span>
                </el-form-item>
                <el-form-item label="经营范围:">
                    <span>{{UScope}}</span>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!--        <form action="http://localhost:8088/supplier/importExcel" method="post" enctype="multipart/form-data">-->
        <!--            <p><input type="file" name="file"></p>-->
        <!--            <p><input type="submit" value="提交"></p>-->
        <!--        </form>-->



    </div>
</template>

<script>
    export default {
        name: "Supplier",
        data() {
            return {
                //分页数据
                tableData: "",
                pageSize: 3,
                total: 50,
                currentPage: 1,

                //动态查询
                supplierName: "",
                manageScope: "",

                //添加页面
                dialogVisible: false,
                supplier: "",
                person: "",
                phone: "",
                address: "",
                scope: "",

                //修改页面
                updateSupplier: false,
                UId: "",
                USupplier: "",
                UPerson: "",
                UPhone: "",
                UAddress: "",
                UScope: "",

                //查询供应商页面
                querySupplier: false,


                //文件上传
                fileList: []

            }
        },
        mounted() {
            this.init();
        },
        methods: {
            excel() {
                // this.axios.get("jxc/supplier/excel").then();
                document.location.href = "http://localhost:8088/supplier/excel";
            },
            handleCurrentChange(val) {
                this.UId = val.id;
                this.USupplier = val.name;
                this.UPerson = val.person;
                this.UPhone = val.phone;
                this.UAddress = val.address;
                this.UScope = val.scope
            },

            //初始化供应商表格数据
            init() {
                let a = "1";
                let b = "1";
                if (this.supplierName != '') {
                    a = this.supplierName
                }
                if (this.manageScope != '') {
                    b = this.manageScope
                }
                let url = "jxc/supplier/findByPageAndItem/" + this.currentPage + "/" +
                    this.pageSize + "/" + a + "/" + b;
                this.axios.get(url).then(
                    r => {
                        this.tableData = r.data.records;
                        this.total = r.data.total
                    }
                );
            },
            query(){
                this.currentPage = 1;
                this.init();
            },
            //当前页发生变化的时候触发事件
            change(currentPage) {
                console.log(currentPage);
                this.currentPage = currentPage;
                this.init()
            },
            //显示添加页面
            addShow() {
                this.dialogVisible = true
            },
            verifySupplier(){
                // eslint-disable-next-line no-cond-assign,no-constant-condition
                if (this.supplier == ""){
                    this.$message({
                        message: '供应商不能为空',
                        type: 'error',
                        duration: 1000
                    });
                    return false
                }else {
                    return true
                }
            },verifyPerson(){
                // eslint-disable-next-line no-cond-assign,no-constant-condition
                if (this.person == ""){
                    this.$message({
                        message: '负责人不能为空',
                        type: 'error',
                        duration: 1000
                    });
                    return false
                }else {
                    return true
                }
            },verifyPhone(){
                // eslint-disable-next-line no-cond-assign,no-constant-condition
                if (this.phone == ""){
                    this.$message({
                        message: '负责人电话不能为空',
                        type: 'error',
                        duration: 1000
                    });
                    return false
                }else {
                    return true
                }
            },verifyAddress(){
                // eslint-disable-next-line no-cond-assign,no-constant-condition
                if (this.address == ""){
                    this.$message({
                        message: '供应商地址不能为空',
                        type: 'error',
                        duration: 1000
                    });
                    return false
                }else {
                    return true
                }
            },verifyScope(){
                // eslint-disable-next-line no-cond-assign,no-constant-condition
                if (this.scope == ""){
                    this.$message({
                        message: '经营范围不能为空',
                        type: 'error',
                        duration: 1000
                    });
                    return false
                }else {
                    return true
                }
            },
            //添加供应商
            add() {
                console.log(this.verifySupplier());
                console.log(this.verifyPerson());
                console.log(this.verifyPhone());
                console.log(this.verifyAddress());
                console.log(this.verifyScope());
                if (this.verifySupplier()&&this.verifyPerson()&&this.verifyPhone()&&this.verifyAddress()&&this.verifyScope()){
                    console.log(111)
                    let data = new FormData();
                    data.append("name", this.supplier);
                    data.append("person", this.person);
                    data.append("phone", this.phone);
                    data.append("address", this.address);
                    data.append("scope", this.scope);
                    this.axios.post("jxc/supplier/add", data).then(
                        r => {
                            if (r.data == "ok") {
                                this.$message({
                                    message: '添加成功',
                                    type: 'success',
                                    duration: 1000
                                });
                            } else if (r.data == "no") {
                                this.$message({
                                    message: '添加失败',
                                    type: 'error',
                                    duration: 1000
                                });
                            }
                        }
                    );
                    this.dialogVisible = false;
                    this.supplier = "";
                    this.person = "";
                    this.phone = "";
                    this.address = "";
                    this.scope = "";
                    this.query();
                }
            },
            //显示修改页面
            updateShow() {
                this.updateSupplier = true;
            },
            //修改供应商信息
            update() {
                let data = new FormData();
                data.append("id", this.UId);
                data.append("person", this.UPerson);
                data.append("phone", this.UPhone);
                this.axios.put("jxc/supplier/update", data).then(
                    r => {
                        if (r.data == "ok") {
                            this.$message({
                                message: '修改成功',
                                type: 'success',
                                duration: 1000
                            });
                        } else if (r.data == "no") {
                            this.$message({
                                message: '修改失败',
                                type: 'error',
                                duration: 1000
                            });
                        }
                        this.updateSupplier = false;
                        this.init();
                    }
                );
            },
            //查看供应商信息
            queryShow() {
                this.querySupplier = true;
            },

            message(data, name) {
                if (data == "ok") {
                    this.$message({
                        message: name + '成功',
                        type: 'success',
                        duration: 1000
                    });
                } else if (data == "no") {
                    this.$message({
                        message: name + '失败',
                        type: 'error',
                        duration: 1000
                    });
                }
            }
            ,
            submitUpload() {
                this.$refs.upload.submit();
            },


            // changeNull(arr){
            //     for (let i = 0; i < arr.length; i++) {
            //         arr
            //     }
            // }
        }
    }
</script>

<style scoped>

</style>